<template>
  <el-table ref="tableRef" :data="tableData" stripe style="width: 100%">
    <el-table-column prop="index" label="计数" width="60" />
    <el-table-column prop="chargingText" label="计费方式" width="100" />
    <el-table-column
      prop="quotation_throwing_weight"
      label="抛重系数"
      width="100"
    />

    <el-table-column label="体积重量" width="100">
      <template #default="{ row }">
        {{ row.charging === "quality" ? row.throwing_weight : "不计费" }}
      </template>
    </el-table-column>
    <el-table-column label="实际重量（kg）" width="120">
      <template #default="{ row }">
        {{ row.charging === "quality" ? row.total_weight : "不计费" }}
      </template>
    </el-table-column>
    <el-table-column
      prop="quotation_proportion"
      label="比重重系数"
      width="100"
    />

    <el-table-column label="比重体积" width="100">
      <template #default="{ row }">
        {{ row.charging === "volume" ? row.throwing_weight : "不计费" }}
      </template>
    </el-table-column>
    <el-table-column label="实际体积（m³）" width="120">
      <template #default="{ row }">
        {{ row.charging === "volume" ? row.total_volume : "不计费" }}
      </template>
    </el-table-column>
    <el-table-column label="实际件数" width="100">
      <template #default="{ row }">
        {{ row.charging === "piece" ? row.total_piece : "不计费" }}
      </template>
    </el-table-column>


    <el-table-column label="计费重量（kg）" width="100">
      <template #default="{ row }">
        {{ row.charging === "quality" ? row.cost_weight : "不计费" }}
      </template>
    </el-table-column>
    <el-table-column label="计费体积（m³）" width="100">
      <template #default="{ row }">
        {{ row.charging === "volume" ? row.cost_volume : "不计费" }}
      </template>
    </el-table-column>
    <el-table-column label="计费件数" width="100">
      <template #default="{ row }">
        {{ row.charging === "piece" ? row.total_piece : "不计费" }}
      </template>
    </el-table-column>

    <!-- 合计行 -->
    <template #append>
      <div class="table-count">
        <span style="width: calc(60px - 24px)"><strong>合计</strong></span>
        <span style="width: calc(100px - 24px)">-</span>
        <span style="width: calc(100px - 24px)">-</span>
        
        <span style="width: calc(100px - 24px)">-</span>
        <span style="width: calc(120px - 24px)">-</span>
        <span style="width: calc(100px - 24px)">-</span>  

        <span style="width: calc(100px - 24px)">-</span>
        <span style="width: calc(120px - 24px)">-</span>
        <span style="width: calc(100px - 24px)">-</span>

        <span style="width: calc(100px - 24px)">{{
          cost_data.total_weight_cost ? cost_data.total_weight_cost : "不计费"
        }}</span>
        <span style="width: calc(100px - 24px)">{{
          cost_data.total_volume_cost ? cost_data.total_volume_cost : "不计费"
        }}</span>
        <span style="width: calc(100px - 24px)">{{
          cost_data.total_piece ? cost_data.total_piece : "不计费"
        }}</span>
      </div>
    </template>
  </el-table>
</template>

<script setup>
import { defineProps, computed, ref } from "vue";

const tableRef = ref(null);

const props = defineProps({
  cost_data: {
    type: Object,
    default: () => ({}),
  },
});

const charging = {
  volume: "体积",
  quality: "重量",
  piece: "件数",
};

// 处理表格数据，添加索引和计费方式文本
const tableData = computed(() => {
  const orderPlanList = props.cost_data.order_plan_list || [];
console.log(orderPlanList,'orderPlanList')
  return orderPlanList.map((item, index) => ({
    ...item,
    index: index + 1,
    chargingText: charging[item.charging] || "",
  }));
});
</script>

<style scoped>
:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table .el-table__header th) {
  background-color: #f5f7fa;
  font-weight: 500;
}

:deep(.el-table__append .el-table-cell) {
  background-color: #fafafa;
  font-weight: 500;
}

.table-count {
  display: flex;
  align-items: center;
  span {
    display: inline-block;
    padding: 12px ;

  }
}
</style>
